$(() =>{
//------------------------------------页面效果逻辑
    let bottomNode = null
    let ti = null
    handlePage()
    function handlePage(){
        const content = $('.set-content .bottom').find('input')

        //当输入 框获取焦点 的时候 提示框信息消失
        content.on('focus', function(){
            $(this).siblings('.ti').html('')
        })
        //点击修改 出现
        $('.change-btn').on('click', function(){

            //获取 DOM元素
            const _this = $(this)
            const id = _this.attr('id')
            const reject_btn_display = _this.siblings('.reject-btn').css('display')

            if(reject_btn_display === 'none'){
                _this.text('确认')
                    .siblings('.reject-btn')
                    .css('display', 'block')//取消按钮
                    .parent('.top').siblings('.bottom')
                    .slideDown()
                return 
            }

            
            bottomNode = _this.parent('.top').siblings('.bottom')
            ti = bottomNode.find('.ti')//错误提示DOM
            //修改 登陆用户名
            if(id === 'changeUN'){

                const userName =  bottomNode.find('input').val()

                if(userName === ''){
                    return ti.html('请输入用户名')
                }else if(userName.length < 3 || userName.length > 6){
                    return ti.html('请输入3~6个字符')
                }
                hangleInfo({userName}, '', res =>{
                    $('#userName').html(userName)
                }) 

            //修改作者名字
            }else if(id === 'changeAN'){

                const authName =  bottomNode.find('input').val()

                if(authName === ''){
                    return ti.html('请输入作者名字')
                }else if(authName.length < 3 || authName.length > 6){
                    return ti.html('请输入3~6个字符')
                }
                hangleInfo({authName}, '', res =>{
                    $('#authName').html(authName)
                }) 
            //修改密码
            }else if(id === 'changeP'){

                const oldPaw =  bottomNode.find('#oldPaw').val()
                const newPaw =  bottomNode.find('#newPaw').val()
                const oneNewPaw =  bottomNode.find('#oneNewPaw').val()
                
                if(oldPaw === '' || newPaw === '' || oneNewPaw === ''){
                    return ti.html('内容不能为空')
                }else if(newPaw.length < 6 || newPaw.length > 12){
                    return ti.html('请输入6~12个字符')
                }else if(newPaw != oneNewPaw){
                    return ti.html('两次密码输入不一致')
                }

                hangleInfo({paw: newPaw}, oldPaw, res =>{
                    $('#paw').html('******')
                }) 
            //修改邮箱
            }else if(id === 'changeE'){

                const oldPaw =  bottomNode.find('#emailPaw').val()
                const newEmail =  bottomNode.find('#newEmail').val()

                //验证邮箱是否正确
                var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
                if(oldPaw === '' || newEmail === ''){
                    return ti.html('内容不能为空')
                }else if(!reg.test(newEmail)){
                    return ti.html('邮箱格式不正确')
                }

                hangleInfo({email: newEmail}, oldPaw, res =>{
                    $('#email').html(newEmail)
                }) 
            }

            ti.html('正在操作，请稍后...')
        }) 

        $('.reject-btn').on('click', function(){
            $(this)
                .css('display', 'none')//取消按钮
                .siblings('.change-btn').text('修改')
                .parent('.top').siblings('.bottom')
                .slideUp(function(){
                    $(this).find('.ti').html('')
                    clearInput($(this))
                })
        }) 
    }
//------------------------------------页面效果逻辑

//------------------------------------发请求 修改信息
    //发请求
    function hangleInfo(data, paw, callBack, ){

        /*
            data: 修改的数据
            paw: 修改的数据是否需要密码
                需要     则为用户输入的密码
                不需要   则为false
            bottomNode 目的是获取 input 修改成功之后清空文本框
        */



        $.ajax({
            type: 'POST',
            url: 'http://localhost:3003/blogsz',
            dataType: 'json',
            data:{
                data: JSON.stringify(data),
                paw
            },
            success(res){

                callBack(res)
                const {code} = res

                if(code === 1){
                    //显示操作成功提示
                    ti.html('操作成功')
                    //关闭修改界面
                    bottomNode
                        .siblings('.top')
                        .find('.change-btn').text('修改')
                }else if(code === 0){
                    ti.html('账户密码输入有误，修改失败')
                }  
            }
        })
    }

    // function hangleInfo(data, paw, callBack, ){

        /*
            data: 修改的数据
            paw: 修改的数据是否需要密码
                需要     则为用户输入的密码
                不需要   则为false
            bottomNode 目的是获取 input 修改成功之后清空文本框
        */

        

    //     $.ajax({
    //         type: 'POST',
    //         url: 'http://localhost:3003/blogsz',
    //         dataType: 'json',
    //         data:{
    //             arr: JSON.stringify([{gender: '男'}, ['敲代码', '打篮球'], 2, 3]),
    //             obj:JSON.stringify({
    //                 name: '车神-黄杰',
    //                 age: 23,
    //                 love:['打豆豆', '爬山'],
    //                 class: {
    //                     item1: '16电子1',
    //                     item: '16电子2'
    //                 }
    //             })
    //         }
    //     })
    // }

    //清空文本框
    function clearInput(){
        if(!bottomNode) return
        $.each(bottomNode.find('input'), (index, item) =>{
            $(item).val('')
        })
    }
//------------------------------------发请求 修改信息

})